<template>
	<!-- <page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'"></page-meta> -->
  <view>	  
    <view class="tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']">
	<view class="regional-selection">
		<view class="specs">
			<view class="specs-top">
			    <view style="font-size: 35rpx" v-if="atype==1">免费配件信息</view>  
				<view style="font-size: 35rpx" v-if="atype==2">付费配件信息</view>
				<view class="flex cancel-button">
					<u-icon name="close-circle" color="#999999" size="22" @click="handleClickMask()"></u-icon>					
				</view>   
			</view>	
		    <swiper class="tab-content"  duration="300" bindchange="changeTab" style="height:690rpx">
				<!-- 全部 -->
				<swiper-item>					  
					<scroll-view :scroll-y="true" class="new-list-box"    :refresher-enabled="false" refresher-threshold="80">
					<view class="mt-20" v-for="(goods1,key,index) in carlist" :key="index"> 
					  <view class="flex  mb-30">
						<view class="specs-image">
						  	<image class="specs-image" shape :src="goods1.goods_logo"></image>
						</view>				     	
						<view class="flex flex-direction ml-20" style="width: 600rpx">
						    <view class="flex specs-goods-name productNameText mt-10">{{goods1.goods_title}}</view>
					    	<view class="flex mt-15" style="color: rgba(5, 30, 56, 0.6);">
							   <view class="">
							   	<text>租金：</text>
							   	<text class="ml-15" style="color: #FF2A00;">¥ {{goods1.goods_price}}</text>
							   </view>					
							   <view class=" ml-30">
							   	<text>押金：</text>
							   	<text class="ml-15" style="color: #FF2A00;">¥ {{goods1.deposit_price}}</text>
							   </view>
					  	    </view>
					    </view>
					  </view>                 
					</view> 
				    </scroll-view>
				</swiper-item>        
			</swiper>        
		  </view>
		  <!-- <view class='button-submit' style="border-top: 1rpx solid #f0ebeb;">
		    <view class="flex justify-between align-center pt-30 mb-15">         
				<view class="submit-btn-right" style="background: #2B91ED;" v-if="type ==1" @click.stop="confirm_order()">去结算</view>
				<view class="submit-btn-right" style="background: #2B91ED;" v-if="type ==2" @click="payOrder">去派单</view>
			</view>   
		  </view> -->
	  </view>
	  
    </view>
	   <!-- 遮罩层 -->
		<view			 
		  class="tui-actionsheet-mask"
		  :class="[show ? 'tui-mask-show' : '']"
		  @tap="handleClickMask"
		></view>
  </view>
</template> 
<script>
	import input_number from "@/components/input-number/index.vue";
export default {
	components: {
	   "t-input-number": input_number,
	},
  props: {
    //点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true,
    },
    //显示操作菜单
    show: {
      type: Boolean,
      default: false,
    },
	atype:{
		type: String,
	}
  },
  data () {
	return {
		carlist:{},    
		type:1,
		triggered: false,
		noSlide:true
	}  
  },
methods:  {	
    handleClickMask() {
		this.$emit("accesClose",false);
    },
	showGoods(event,type='1'){
	  this.carlist=event.list,
	  this.type=type
	},
	allLoadMore(e){		
		return true
	},
	OrderSpecs(orderId,order_type){
		let that=this
		let obj_data={
		   order_id:orderId,
		   order_type,
		   token:uni.getStorageSync('userInfo').app_openid,
		   login_type:'app',
		}  
		this.$http.orderInfo(obj_data).then(res =>{
		 if(res.resCode=="9999"){					
			that.carlist=res.data.fee_list
			console.log(that.carlist);
		 }else{
		   uni.showToast({title:res.resMessage,icon:"none"})
		 }
		})
	},
	NgoodsSpecs(goodsId,order_type,leaseIds){
		let that=this
		let obj_data={
		   goodsId,
		   type:3,
		   order_type,
		   leaseIds
		}  
		this.$http.shopInfo(obj_data).then(res =>{
		 if(res.resCode=="9999"){					
			that.carlist=res.data.fee_list
			console.log(that.carlist);
		 }else{
		   uni.showToast({title:res.resMessage,icon:"none"})
		 }
		})
	},
	NgoodsSpec(goodsId,type){
		let that=this
		let obj_data={
		   goodsId,
		   type:3
		}  
		this.$http.shopInfo(obj_data).then(res =>{
		 if(res.resCode=="9999"){					
			if(type ==1) that.carlist=res.data.fee_list
			console.log(that.carlist);
		 }else{
		   uni.showToast({title:res.resMessage,icon:"none"})
		 }
		})
	}
	
   
  },
};
</script>
 
<style scoped lang="less">
	
	.cancel-button{
		position: absolute;
		margin-top: -15rpx;
		right: 10rpx;
	}
	
	.specs-top-desc{
	  display: flex;
	  flex-direction: column;
	  font-size: 25rpx;
	  margin-left: 35rpx;
	  color: gray;
	  margin-top: 15rpx;
	  
	}
	
	.specs-top-title{
	  display: flex;
	  flex-direction: row;
	  justify-content: left;
	  font-size: 25rpx;
	  margin-left: 35rpx;  
	  margin-top: 25rpx;
	  
	}
	
	.localtion{
	  display: flex;
	  flex-direction: row;
	  color: gray;
	}
	
	.specs-top{
	  display: flex;
	  flex-direction: row;
	  font-size: 23rpx;
	  justify-content: center;
	  align-items: center;
	  padding-bottom: 10rpx;
	  // border-bottom: 1rpx solid rgb(240, 235, 235);
	  padding-top: 20rpx;
	 
	
	 }
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  // background: #eaeaec;
  min-height: 100rpx;
}
 
.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.regional-selection {
    text-align: center;
  height: 900rpx;
  background: #fff;
  border-radius: 20rpx;
}
.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
 
.tui-mask-show {
  opacity: 1;
  visibility: visible;
}

/* component/specs/index.wxss */
.specs{
  padding: 0 20rpx;
  align-items: flex-end;

}

.productNameText{color:rgb(32,27,27);font-size:35rpx;text-overflow:ellipsis;display:-webkit-box;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}


.specs-image {
  width: 182rpx !important;
  height: 156rpx !important;
  background: rgba(0, 0, 0, 0);
  border: 1rpx solid #eaeaea;
  border-radius: 16rpx;
}

.specs-title {
  font-size: 30rpx;
  color: #333333;
  opacity: 1;
  margin: 30rpx 0 20rpx 0;
}

.specs-cell{
  display: flex;
  flex-wrap: wrap;
}

.specs-name {
  color: #888888;
  border: 1rpx solid #888888;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  font-size: 28rpx;
  margin-right: 15rpx;
  margin-bottom: 20rpx;
}

.specs-goods-name {
	display: flex !important;
  font-size: 32rpx;
  line-height: 40rpx;
  margin-bottom: 10rpx;
}

.specs-goods {
  font-size: 28rpx;
  line-height: 40rpx;
  color: gray;
  margin-bottom: 20rpx;
}
.specs_name{
  margin-top: 40rpx;
  width: 62%;
  border-bottom: 1rpx solid rgb(240, 235, 235);
  
}

.specs-price {
  font-size: 38rpx;
  color: #EE4D52;
  margin-left: -5rpx;
}

.specs-num {
  font-size: 28rpx;
  color: #999999;
}

.submit-btn-left {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  min-width: 240rpx;
  width: 100%;
  height: 76rpx;
  opacity: 1;
  border-radius: 38rpx 0 0 38rpx;
}

.submit-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  min-width: 240rpx;
  width: 100%;
  height: 76rpx;
  opacity: 1;
  /* border-radius: 0 38rpx 38rpx 0;
  margin-top: 2rpx; */
}
.specs{
 
    margin-bottom: -25rpx;
    
}
.main-bottom{
  display: flex;
  flex-direction:column;
}
.new-list-box{
	height: 100%;
}
</style>